<template>
  <zh-space>
    <div style="text-align: center">
      <el-transfer :data="data.labelData" v-model="data.rightLabelTargetKeys" filterable :props="{
				key: 'key',
				label: 'title',
			}" :titles="['标签库', '已选标签']" @change="handleChangeRole">
        <template #default="{ option }">
          <span>{{ option.title }} </span>
        </template>
      </el-transfer>
    </div>
    <div class="lableBtn">
      <zh-button buttonType="save" icon="" @click="clickSure"> 确定 </zh-button>
      <zh-button buttonType="query" icon="" @click="clickCancel"> 取消 </zh-button>
    </div>
  </zh-space>
</template>
<script lang="ts" setup name="releaseAuth">
import ZhSpace from '@/components/zh-space/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// -------------------页面跳转接收参数------------------------------
let editLabelData = defineProps({
  editLabelInfo: Object,
});
const emit = defineEmits(['changeAuditDialog']);
// -------------------初始化------------------------------
onMounted(() => {
  getDict();
  setTimeout(() => {
    oldLabelValue();
  }, 50);
  data.editLabelData = editLabelData;
});
onUpdated(() => {
  oldLabelValue();
})
// ------------------内部变量定义-------------------------
// 主数据对象
const data = reactive({
  // 表单对象
  formData: {
    labelArray: [] as any, //标签字典
    labelArray1: [] as any, //已选标签
  } as any,
  labelData: [] as Array<any>,//标签字典
  labelTargetKeys: [] as Array<any>,//选中后标签
  rightLabelTargetKeys: [] as Array<any>,//已选标签
  editLabelData: {
    editLabelInfo: {
      appLabel: '' as string
    }
  } as any
});

// ------------------定义调用方法-------------------------
// 查询数据字典信息
const getDict = () => {
  let params = {
    dictFields: 'APPLABEL',
  };
  $api.common.getBatchDict.post(params).then((res: any) => {
    data.formData.labelArray = res.result.APPLABEL;
    const dataList = [] as any;
    for (let i = 0; i < data.formData.labelArray.length; i++) {
      const item = data.formData.labelArray[i];
      dataList.push({
        key: item.dictKey,
        title: item.dictValue
      })
    }
    data.labelData = dataList;
  });

};
//将原有的标签显示
const oldLabelValue = () => { 
    if(data.editLabelData.editLabelInfo.appLabel){
      data.rightLabelTargetKeys = data.editLabelData.editLabelInfo.appLabel.split(',')
    }
};
function handleChangeRole(targetKeys) {
  data.labelTargetKeys = targetKeys;
}

const changeDialog = () => {
  emit("changeLabelDialog", false);
}
//点击确定：将标签保存到应用
const clickSure = () => {
  ElMessageBox.confirm('是否确定修改标签?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      let appLabelParam = [] as Array<any>;
      for (const item of data.labelTargetKeys) {
        appLabelParam[appLabelParam.length] = item;
      }
      let params = {
        appInfoId: data.editLabelData.editLabelInfo.appInfoId,
        appLabel: appLabelParam + '',
      };
      $api.common.send.post('appInfo0015', params).then(() => {
        ElMessage({
          message: '修改成功',
          type: 'success',
        });
      });
      changeDialog()
    })
};
//点击取消：将未确定且变更后的标签全部还原
const clickCancel = () => {
  changeDialog()
};
</script>
<style lang="scss" scoped>
.input-label {
	margin: 5px;
}
.btnStyle {
	position: absolute;
	top: 73%;
	margin-left: 85%;
}

.btn-submit {
	background-color: #409eff;
	color: white;
}
.lableBtn {
	display: flex;
	justify-content: flex-end;
}
</style>
